<template>
  <page-meta>
    <navigation-bar
      title="吐槽交流"
      background-color="#5896f5"
    />
  </page-meta>
  <view>
    <!-- 广告位 -->
    <ad-bar />
    <!-- 分段器 -->
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="currentItem"
        :values="titleItems"
        style-type="text"
        active-color="#007aff"
        @clickItem="onClickItem"
      />
    </view>
    <recommend-article 
      v-if="drawCard[1]"
      v-show="showCard[1]"
      ref="recommendArticle"
    />
  </view>
</template>

<script>
import adBar from '@/components/adBar.vue'
import recommendArticle from './module/recommendArticle.vue'
export default {
  components: {
    adBar,
    recommendArticle
  },
  data() {
    return {
      titleItems: ['关注', '推荐', '热门'],
      drawCard: [false, true, false],
      showCard: [false, true, false],
      currentItem: 1	
    }
  },
  methods: {
    onClickItem(e) {
      if (this.currentItem === e.currentIndex) {
        return // 重复点击不生效
      }
      // 将上一张卡片隐藏
      this.showCard[this.currentItem] = false
      // 切换下一张卡片显示
      this.drawCard[e.currentIndex] = true
      this.showCard[e.currentIndex] = true
      // 更新索引
      this.currentItem = e.currentIndex
    }	
  }
}
</script>

<style>

</style>
